<template>
    <div class="app_content">
        <div class="table_qy">
            <div class="middle lb_title">操作日志</div>
            <div class="middle cxk_qy"  ref="element">
                <el-form :inline="true" ref="search_form" :model="formInline" class="demo-form-inline">
                    <el-form-item prop="gxhxm" label="工学号/姓名：">
                        <el-input v-model="formInline.gxhxm" placeholder="工学号/姓名"  size="mini"></el-input>
                    </el-form-item>

                    <el-form-item prop="xyybs" label="小应用标识：">
                        <el-input v-model="formInline.xyybs" placeholder="小应用标识"  size="mini"></el-input>
                    </el-form-item>

                    <el-form-item prop="wymbs" label="微页面标识：">
                        <el-input v-model="formInline.wymbs" placeholder="微页面标识"  size="mini"></el-input>
                    </el-form-item>

                    <el-form-item prop="sjfw" label="时间范围：">
                        <el-date-picker
                                size="mini"
                                unlink-panels
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="formInline.sjfw"
                                type="datetimerange"
                                :picker-options="formInline.pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="search()" size="mini" class="button_search">查询</el-button>
                        <el-button type="info" @click="reset()" size="mini" class="button_reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table_padding">
                <div class="table_content">
                    <el-table  :data="tableData" stripe border  class="table_overflow"
                               :style="{height: scrollerHeight}" >
                        <el-table-column type="index" label="序号" width="52"></el-table-column>
                        <el-table-column v-if="false" type="id" label="id" width="52"></el-table-column>
                        <el-table-column prop="czrid" label="操作人" width="200"></el-table-column>
                        <el-table-column prop="czrxm" label="操作人姓名" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="xyybs" label="小应用标识"  width="200"></el-table-column>
                        <el-table-column prop="wymbs" label="微页面标识" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ymngnmc" label="页面内功能名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="cznr" label="操作内容" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="czsj" label="操作时间" :show-overflow-tooltip="true"></el-table-column>
                    </el-table>

                    <div class="pageIn">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 50,100, 200, 300, 400]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
    import {jcqggCzrzFindListByPage} from '../../../../api/app/xtgl0301/czrz.js'
    export default {
        name: "czrz",
        data() {
            return {
                scrollerHeight:"",
                contentStyleObj:"200px",
                formInline : {
                    xyybs: '',
                    wymbs: '',
                    gxhxm: '',
                    pickerOptions: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                    sjfw:[],
                },
                id_show:false,
                tableData:[],
                currentPage:1,
                pageSize:50,
                total:0
            }
        },
        mounted() {
            this.search();
            let height= this.$refs.element.offsetHeight;
            this.scrollerHeight = (window.innerHeight - height - 210) + 'px';
        },
        methods: {
            async search(){
                let params = {
                    xyybs: this.formInline.xyybs,
                    wymbs:this.formInline.wymbs,
                    gxhxm: this.formInline.gxhxm,
                    sjfw : this.formInline.sjfw,
                    page : this.currentPage,
                    pageSize: this.pageSize
                }
                let result = await jcqggCzrzFindListByPage(params)
                if (result.code != "200") {
                    this.$message.success('查询失败，失败原因：' + result.data.message);
                } else {
                    this.tableData=result.data.content
                    this.total = result.data.pageInfo.total
                }
            },
            reset() {
                this.$refs['search_form'].resetFields()
                this.search()
            },
            handleSizeChange(val) {
                this.currentPage = val;
                this.search();
            },
            handleCurrentChange(val) {                                            //分页
                this.currentPage = val
            },
        },

    }
</script>

<style scoped>
    @import "../../../../styles/app0301.scss";
</style>